2 Comments.
[[image/text:Test Picture Upload]]{
50% 80% 6% 70% Be Open! Be Soft! Be Meta!
20% 5% 30% 40% Parameters "20% 5% 30% 40%"
20% 45% 10% 40% Parameters "20% 45% 10% 40%"
20% 75% 5% 40% Parameters "20% 75% 5% 40%"}with pixels instead of percentages
[[image/text:Test Picture Upload]]{
250px 400px 30px 350px Parameters "250px 400px 30px 350px"
100px 25px 150px 200px Parameters "100px 25px 150px 200px"
100px 200px 50px 200px Parameters "100px 200px 50px 200px"
100px 400px 25px 200px Parameters "100px 400px 25px 200px"}with an image loaded from file in the "zhurnaly.com/images/" directory, rather than from a page where an image was uploaded
[[image/text:running/Hashawha_Hills_50k_z_2018-02-24.jpg]]{
500px 500px 100px 350px Parameters "500px 500px 100px 350px"
100px 25px 150px 200px Parameters "100px 25px 150px 200px"
100px 200px 50px 200px Parameters "100px 200px 50px 200px"
100px 400px 25px 200px Parameters "100px 400px 25px 200px"}
with a big image - 1280x1280 pixels from Echinacea Season
[[image/text:./Echinacea_on_Forest_Glen.jpg]]{
100px 100px 500px 0px Be Open!
100px 1100px 100px 0px Be Obvious Be Positive Don't Do Your Best
900px 1200px 400px 0px ... I encourage negative people to be positive, and clever people to be obvious, and anxious people not to do their best. ... - Keith Johnstone}
DOCUMENTATION
from Oddmuse Image Extension:
New link patterns
Specify one or more CSS classes:
image/class:page name
image/class/class:page name
Specify an alternate text for text-only browsers:
Specify an alternate text and a different local page as a target (instead of the image source page):
Specify an alternate text and an URL as target (instead of the image source page):
With caption:
With the caption linking somewhere else:
In all cases, *image*, *target*, and *reference* can be either page names, URLs (matching FullUrlPattern), or URL Abbreviations.
You can also write some text on the image:
image/class:image{
class/left top width height Some text
}
For example:
image/class:image{
10% 15% 50% 20% Do not try this at home!
mybold/10% 40% 50% 20% You has been warned!
}
You can specify coordinates in any other unit like px or em, but % are more convenient if the image is resized. You can see this feature in action here (pure css, no javascript used).
Option: $ImageUrlPath
Default: "/images"
The URL where image files can be found.
image/class external:image-file-name
The image will be loaded from $ImageUrlPath + image-file-name.
CSS
- a.image: The image link.
; a.class: The user defined classes are added to the image link as well.
; a.outside: If the target is an URL instead of a page name, the outside class will be added to the image link.
; img.upload: The image inside the link.
If a caption has been provided:
- div.image: The div for image and caption.
; div.class: The user defined classes are added to the div for image and caption as well.
; a.image + br: The line break between the image and the caption.
; span.caption: The caption is enclosed in a span.
If one or more comments were provided:
- div.imageholder: The div that wraps around the image and comments.
; div.imagecomment: The div which holds each comment (coordinates are specified via inline css).
; div.class: The user defined classes are added to the imagecomment div.
The CSS class specified is applied to the /link/, not the image itself.
Here is a CSS example to use the /class modifier, for image/left and image/right:
.left { float:left; }
.right { float:right; }
div.left .left, div.right .right {
float:none;
}
.center { text-align:center; }</div>